<template>
  <view class="shop-container">
    <!-- <Form ref="Addressform" :model="formData.addressId" :rules="rules"></Form> -->
    <Form ref="form" :model="formData" :rules="rules">
      <FormItem label="店铺名称" :show-arrow="false">
        <input v-model="formData.shopName" type="text" placeholder="请输入店铺名称" />
      </FormItem>
      <FormItem label="店铺电话" :show-arrow="false">
        <input v-model="formData.shopPhone" type="number" placeholder="请输入店铺电话" />
      </FormItem>
      <FormItem label="联系人" :show-arrow="false">
        <input v-model="formData.contact" type="text" placeholder="请输入店铺联系人" />
      </FormItem>
      <FormItem label="营业时间" :show-arrow="false">
        <view class="shop-time-wrap">
          <picker mode="multiSelector" :range="range" :value="timeValue" @change="bindTimeChange">
            <view v-if="formData.businessStartTime&&formData.businessEndTime">{{formData.businessStartTime}} - {{formData.businessEndTime}}</view>
            <view v-else>请选择</view>
          </picker>
        </view>
      </FormItem>
      <FormItem label="经营地址" :show-arrow="false">
        <view class="shop-city-wrap" @click="openAddressSel">
          <view v-if="formData.addressId&&formData.addressId.provinceId" class="business-time-wrap">
            <text>{{ formData.address }}</text>
          </view>
          <view v-else class="no-data-wrap">请选择</view>
        </view>
      </FormItem>
      <FormItem label="详细地址" :show-arrow="false">
        <input v-model="formData.addressInfo" type="text" placeholder="请输入店铺详细地址" />
      </FormItem>
      <!-- <FormItem label="门头照片" :show-arrow="false" text-align="right">
        <Upload :file="formData.shopFrontPic" @success="uploadSuccess" />
      </FormItem>-->
    </Form>
    <!-- <button type="primary" class="save-btn" @click="submit">保存</button> -->
    <SaveButton text="保存" @click.native="submit" />
    <simpleAddress ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="selectCity" themeColor="#007AFF" />
  </view>
</template>

<script>
import Form from "../../components/public/Form/index.vue";
import FormItem from "../../components/public/FormItem/index.vue";
import Upload from "../../components/public/Upload/index.vue";
import simpleAddress from "@/components/simple-address/simple-address.vue";
import { mapGetters, mapActions, mapState } from "vuex";
import SaveButton from "../../components/public/Button/SaveButton.vue";
// import schema from "async-validator";
export default {
  components: { Form, FormItem, Upload, simpleAddress, SaveButton },
  data() {
    return {
      cityPickerValueDefault: [0, 0, 0],
      formData: {
        id: "",
        shopName: "",
        shopPhone: "",
        businessStartTime: "",
        businessEndTime: "",
        addressId: {
          cityId: "",
          districtId: "",
          provinceId: ""
        },
        addressInfo: "",
        address: "",
        contact: ""
      },
      range: [],
      timeValue: [],
      rules: {
        shopName: { required: true, type: "string", message: "请输入店铺名称" },
        shopPhone: [
          { required: true, message: "请输入店铺电话" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的电话号码"
          }
        ],
        businessStartTime: { required: true, message: "请选择营业时间" },
        businessEndTime: { required: true, message: "请选择营业时间" },
        addressId: {
          type: "object",
          required: true,
          message: "请选择经营地址",
          fields: {
            cityId: { required: true, message: "请选择经营地址" },
            districtId: { required: true, message: "请选择经营地址" },
            provinceId: { required: true, message: "请选择经营地址" }
          }
        },
        addressInfo: { required: true, message: "请输入店铺详细地址" }
      }
    };
  },
  computed: {
    ...mapGetters({
      // activeShop: "activeShop"
    }),
    ...mapState({
      activeShop: state => state.user.shop
    })
  },
  onLoad() {
    // 初始化表单信息
    let shop = this.$deepStr(this.activeShop);
    for (const key in this.formData) {
      if (this.activeShop[key]) this.formData[key] = this.activeShop[key];
    }
    this.initRange();
  },
  methods: {
    ...mapActions({
      putShop: "putShop"
    }),
    initRange() {
      // 设置选项
      let hourArr = [];
      let minusArr = [];
      for (let index = 0; index < 24; index++) {
        let v = index + "";
        v = v.length == 2 ? v : "0" + v;
        hourArr.push(v);
      }
      for (let index = 0; index < 60; index++) {
        let v = index + "";
        v = v.length == 2 ? v : "0" + v;
        minusArr.push(v);
      }
      this.range = [hourArr, minusArr, hourArr, minusArr];
      // 初始化选择器
      let val1 = (this.formData.businessStartTime || "").split(":");
      let val2 = (this.formData.businessEndTime || "").split(":");
      let value = [...val1, ...val2];

      value.forEach((v, index) => {
        let i = index % 2 == 0 ? minusArr.indexOf(v) : hourArr.indexOf(v);
        if (i > -1) this.timeValue.push(i);
      });
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.putShop({ params: this.formData }).then(res => {
            if (!res.code) {
              this.$back();
            }
          });
        }
      });
    },
    uploadSuccess(res) {
      this.formData.shopFrontPic = res.data[0];
    },
    // 时间选择
    bindTimeChange(e) {
      let value = e.detail.value;
      let date1 = this.range[0][value[0]] + ":" + this.range[1][value[1]];
      let date2 = this.range[2][value[2]] + ":" + this.range[3][value[3]];
      this.formData.businessStartTime = date1;
      this.formData.businessEndTime = date2;
    },
    openAddressSel() {
      if (this.formData.addressId.provinceId) {
        var index = this.$refs.simpleAddress.queryIndex(
          [
            this.formData.addressId.provinceId,
            this.formData.addressId.cityId,
            this.formData.addressId.districtId
          ],
          "value"
        );
        this.cityPickerValueDefault = index.index;
      }
      this.$refs.simpleAddress.open();
    },
    // 地址选择
    selectCity(e) {
      this.formData.addressId.provinceId = e.provinceCode;
      this.formData.addressId.cityId = e.cityCode;
      this.formData.addressId.districtId = e.areaCode;
      this.formData.address = e.labelArr.join("/");
    }
  }
};
</script>

<style lang="scss" scoped>
.shop-container {
  .save-btn {
    position: fixed;
    bottom: 20rpx;
    left: 20rpx;
    right: 20rpx;
  }
}
</style>
